<template>
        <div :style="{width:props.width,display:props.direction==='bottom'? '' : 'flex',alignItems:'center'}">
          <div class="select-list">
            <el-select v-model="data.form.provinceCode" @change="chooseProvince" :disabled="props.disabled" style="margin-right:10px" class="select" >
              <el-option :label="province.criName" :value="province.criCode" v-for="province in data.provinceSelectList" :key="province.criName" />
            </el-select>
            <el-select v-model="data.form.cityCode" @change="chooseCity" :disabled="props.disabled" style="margin-right: 10px" class="select">
              <el-option :label="city.criName" :value="city.criCode" v-for="city in data.citySelectList" :key="city.criName" />
            </el-select>
            <el-select v-model="data.form.areaCode" @change="chooseArea" :disabled="props.disabled" :style="{marginRight:props.direction==='bottom'?'':'10px'}" class="select">
              <el-option :label="area.criName" :value="area.criCode" v-for="area in data.areaSelectList" :key="area.criName" />
            </el-select>
          </div>
          <div v-if="props.showDetailAddress">
            <el-input v-model="data.form.detailAddress" @input="chooseArea" :disabled="props.disabled" placeholder="请输入详细地址" :style="{marginTop: props.direction==='bottom'?'20px':'',width:props.direction==='bottom'?'':'200px'}"></el-input>
          </div>
        </div>
</template>

<script setup>
import { reactive ,defineEmits , watch} from 'vue';
import {  getRegionApi } from '@/api/public/publicDict.js'

//回显传入参数info严格按照以下键值对
  // backInfo:{
  //   provinceCode: '510000',
  //   cityCode: '510100',
  //   areaCode: '510104',
  //   provinceName: '四川省',
  //   cityName: '成都市',
  //   areaName: '锦江区',
  //   detailAddress: '滴滴街道',
  // }
const props = defineProps({
    width:{
        type:String,
        default:'140px'
    },
    showDetailAddress:{
        type:Boolean,
        default:false
    },
    backInfo:{
      type:Object,
      default: ()=> null
    },
    disabled:{
      type:Boolean,
      default:false
    },
    direction:{
      type:String,
      default:'bottom' 
    }
})


const data = reactive({
    form:{
        provinceCode: null,
        cityCode: null,
        areaCode: null,
        provinceName: '',
        cityName: '',
        areaName:'',
        detailAddress: '',
    },
    provinceSelectList: [],
    citySelectList: [],
    areaSelectList: [],
})

const emit = defineEmits(['changeAddress'])


//获取省
const getProvince = async() => {
    await getRegionApi({ criSuperiorCode: '000000' }).then((res) => {
    if (res.status === 200) {
      data.provinceSelectList = res.data
    }
  })
}
//获取市
const getCity = async(code) => {
    await getRegionApi({ criSuperiorCode: code }).then((res) => {
    if (res.status === 200) {
      data.citySelectList = res.data
    }
  })
}
//获取县
const getArea = async (code) => {
    await getRegionApi({ criSuperiorCode: code }).then((res) => {
    if (res.status === 200) {
      data.areaSelectList = res.data
    }
  })
}




//选择省
const chooseProvince=async ()=>{
  await getCity(data.form.provinceCode)
  data.form.cityCode = data.citySelectList[0].criCode
  await getArea(data.form.cityCode)
  data.form.areaCode = data.areaSelectList[0].criCode
  chooseArea()
}
//选择市
const chooseCity= async()=>{
  await getArea(data.form.cityCode)
  data.form.areaCode = data.areaSelectList[0].criCode
  chooseArea()
}
//选择县
const chooseArea = ()=>{
  let form = {
        provinceCode: data.form.provinceCode,
        cityCode: data.form.cityCode,
        areaCode: data.form.areaCode,
        provinceName: data.provinceSelectList.find(v=> v.criCode==data.form.provinceCode).criName,
        cityName: data.citySelectList.find(v=> v.criCode==data.form.cityCode).criName,
        areaName:data.areaSelectList.find(v=> v.criCode==data.form.areaCode).criName,
        detailAddress: data.form.detailAddress,
    }
    emit('changeAddress',form)
}




//初始化地址
const initAddress=async ()=>{
    await getProvince()
    data.form.provinceCode = data.provinceSelectList[0].criCode
    await getCity(data.form.provinceCode)
    data.form.cityCode = data.citySelectList[0].criCode
    await getArea(data.form.cityCode)
    data.form.areaCode = data.areaSelectList[0].criCode
    chooseArea()
}


const setAddress = async()=>{
      if(props.backInfo){
      await getProvince()
      data.form.provinceCode = props.backInfo.provinceCode+''
      await getCity(data.form.provinceCode)
      data.form.cityCode= props.backInfo.cityCode+''
      await getArea(data.form.cityCode)
      data.form.areaCode= props.backInfo.areaCode+''
      data.form.detailAddress = props.backInfo.detailAddress
    }
    else{
      initAddress()
    }
}
setAddress()


watch(props.backInfo, (n, o) => {
  setAddress()
})

</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
  .el-select-dropdown__item {
    font-size: 12px;
  }
}
.select-list{
display: flex;
}
.select{
  flex: 1;
}
</style>